<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人中心</title>
		<!-- 引入 Vue.js 和 Element UI 的脚本 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
		<!-- 引入 Element UI 样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

		<link href="css/index.css" rel="stylesheet" type="text/css"/>
		<link href="css/user.css" rel="stylesheet" type="text/css"/>

		 
			 
	</head>
	<body>
		
		<div id="app">
			<div class="td-header" :class="{ 'is-sticky': isSticky }">
				<div class="td-header-content">
					<div class="td-header-logo">
						<img src="image/logo.png" />
						<li> 土豆小说网 </li>
					</div>
					<div class="td-header-right">
						<div class="right-shouye">
							<a href="index.html">首页</a>
							 
						</div>
						<div class="right-shouye">
							<a href="#">书库</a>
							 
						</div>
						<div class="right-shouye">
							<a href="#">书架</a>
							 
						</div>
						<div class="right-shouye">
							<a href="#">排行榜</a>
							 
						</div>
						<div class="right-search">
							<input placeholder="请输入书名或作者名" v-model="selectneirou">
							<img @click="select()" style="cursor: pointer;width: 15px;height: 18px;" src="https://ziyilin.oss-cn-shanghai.aliyuncs.com/%E6%90%9C%E7%B4%A21.png" />

						</div>
						<div class="serial-divider  byte-divider byte-divider-vertical" style="margin-right: 40px;"></div>
						<div class="right-user">
							<a  v-if="!isLogged" href="login.html"> <div class="user-login">登录</div></a>
							<a v-if="!isLogged" href="login.html"><div class="user-reg">注册</div></a>
							<div v-if="isLogged" style="display: flex; align-items: center;cursor: pointer;"  >
								<el-avatar   icon="el-icon-user-solid" :src="this.user.avatar"> </el-avatar>
								<span @click="geren()"  style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px; ">{{this.user.username}} </span>
							</div>
							<div v-if="isLogged" style="display: flex; align-items: center;">
								<span    class="user-logout" @click="logout()" style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px;cursor: pointer; ">退出 </span>
							</div>

						</div>
						 
						 
						 
						 
						 
					</div>
				</div>
			</div>
			
			<div class="user">
				<div class="user-main">
					<div class="user">
						<div class="user-wrap">
							<el-row class="tac" style="margin-top: 20px;">
							  <el-col :span="12" style="width: 100%;">
								 
								<el-menu
								  default-active="2"
								  class="el-menu-vertical-demo"
								  @open="handleOpen"
								  @close="handleClose">
								   
								   
								  <el-menu-item index="2" @click="menu1()">
									<i class="el-icon-menu"></i>
									<span slot="title" @click="menu1()">个人信息</span>
								  </el-menu-item>
								  
								  <el-menu-item index="3" @click="menu2()" >
									<i class="el-icon-document"></i>
									<span slot="title" @click="menu2()">充值</span>
								  </el-menu-item>
								  <el-menu-item index="4" @click="menu3()">
									<i class="el-icon-setting"></i>
									<span slot="title" @click="menu3()">更多</span>
								  </el-menu-item>
								</el-menu>
							  </el-col>
							</el-row>
						</div>
						
						<div class="user-index">


							<el-form v-if="ismenu1" ref="form" :model="form" status-icon :rules="rules" label-width="80px">
								<el-form-item label="用户头像" >
									<el-upload
											class="avatar-uploader"
											action="/houtai/novel/upImg/"
											:show-file-list="false"
											:on-success="handleAvatarSuccess"
											:before-upload="beforeAvatarUpload">
										<img  v-if=" form.avatar" :src=" form.avatar" class="avatar"  >
										<i v-else class="el-icon-plus avatar-uploader-icon"   ></i>
									</el-upload>
								</el-form-item>
								<el-form-item label="用户名"  prop="username"  style="width: 50%;">
									<el-input v-model="form.username"   ></el-input>
								</el-form-item>
								<el-form-item label="密码"  prop="password" style="width: 50%;">
									<el-input v-model="form.password"></el-input>
								</el-form-item>
								<el-form-item label="手机号"  prop="phone" style="width: 50%;">
									<el-input v-model="form.phone"></el-input>
								</el-form-item>
								<el-form-item label="邮箱"  prop="email" style="width: 50%;">
									<el-input v-model="form.email"></el-input>
								</el-form-item>

								<el-form-item label="座右铭" prop="introduction"  style="width: 80%;">
									<el-input type="textarea" v-model="form.introduction"  :rows="2"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submitForm()">修改</el-button>
									 <el-button @click="resetForm()">重置</el-button>
								</el-form-item>
							</el-form>

							<div v-if="ismenu2" style="margin-left: 50px;">
								<div style="background-color: #01AAED; width: 100%;line-height: 90px;font-size: 15px;border: 1px solid gray;color: white;">
									<i class="layui-icon layui-icon-dollar" style="font-size: 30px;color: #FFD471;margin-left: 10px;"></i>
									<span style="font-size: 30px">充值中心</span>
								</div>
								<div style="width: 100%; ">
									<span><br></span>
									<div style="background-color: #DCF0F7;width: 85%;line-height: 100px; margin-left: 4%;">
										<div style="margin: 0 30px 0 30px;">
											<img :src="this.form.avatar" style="width: 80px;height: 80px;border-radius: 50%;overflow: hidden;"/>
											<span> 充值账号：{{this.form.phone}}</span>
											<span name="balance" style="float: right;"> 账户余额：￥{{this.form.money}}</span>
										</div>
									</div>
									<div style="margin: 30px 0 0 50px;">
										<div style="width: 80%;line-height: 80px;">
											<el-button :type="selectedAmount == 10 ? 'primary' : 'default'" @click="selectAmount(10)">10元
											</el-button>
											<el-button :type="selectedAmount == 50 ? 'primary' : 'default'" @click="selectAmount(50)">50元
											</el-button>
											<el-button :type="selectedAmount == 100 ? 'primary' : 'default'" @click="selectAmount(100)">100元
											</el-button>

											<input type="text" v-model="customAmount" @input="clearSelection" placeholder="其他金额"
												   style="width: 80px; height: 36px; padding: 0 10px; margin-left: 20px;">

										</div>
										<div>
											<span> 充值方法 ： </span>

											<span>
										   `	 <input type="radio" name="paymentMethod" value="wechat" title="微信支付"
												   v-model="selectedPaymentMethod">
												<img src="https://ziyilin.oss-cn-shanghai.aliyuncs.com/wxPay.png" @click="selectPayment('wechat')"
												 :class="{ 'selected': selectedPaymentMethod == 'wechat' }">微信支付
											</span>
											<span style="margin-left: 50px;">
												<input type="radio" name="paymentMethod" value="alipay" title="支付宝支付"
												   v-model="selectedPaymentMethod">
												<img src="https://ziyilin.oss-cn-shanghai.aliyuncs.com/zfbPay.png" @click="selectPayment('alipay')"
												 :class="{ 'selected': selectedPaymentMethod == 'alipay' }">支付宝支付
											</span>`

											<div style="line-height: 20px;margin-top: 20px">
												<button type="button" class="layui-btn layui-btn-lg" @click="recharge()">确认充值</button>
											</div>

										</div>
									</div>
								</div>
							</div>

<!--							<el-form v-if="ismenu3"  ref="author" :model="author" label-width="80px">-->

<!--								<div class="become-author-tip">-->
<!--									<img class="become-author-tip-img" alt="" width="81" height="80" src="">-->
<!--									<div>-->
<!--										<div class="become-author-tip-title">欢迎成为土豆作家，快来填写信息～</div>-->
<!--										<div class="become-author-tip-desc">优质的笔名和简介，能够让读者更快记住你</div>-->
<!--									</div>-->
<!--								</div>-->
<!--								<el-form-item label="笔名">-->
<!--									<el-input v-model="author.authorName" style="width: 50%;"></el-input>-->
<!--								</el-form-item>-->

<!--								<el-form-item label="座右铭">-->
<!--									<el-input type="textarea" v-model="author.motto" style="width: 80%;"></el-input>-->
<!--								</el-form-item>-->
<!--								<el-form-item>-->
<!--									<el-button type="primary" @click="onSubmit">成为作家</el-button>-->

<!--								</el-form-item>-->
<!--							</el-form>-->
						</div>
					</div>
				</div>
				
			</div>
			
		 
			<div class="td-footer">
				  <p>Company Name</p>
				 <p>Address: 123 Street, City, Country</p>
				 <p>Email: info@example.com</p>
			</div>
		</div>
	</body>
	
	
	<script>
	 
	 
	
	var v = new Vue({
		el : "#app",
		data() {
			 
			 var username = (rule, value, callback) => {
			     if (!value) {
			       return callback(new Error('用户名不能为空'));
			     }
				 else{
					 callback();
				 }
			    
			  };
			   var phone = (rule, value, callback) => {
			     if (!value) {
			       return callback(new Error('手机号不能为空'));
			     }
			     
			     setTimeout(() => {
			       if (!Number.isInteger(value)) {
			         callback(new Error('请输入数字值'));
			       } else {
			        if (value.toString().length != 11) {
			           callback(new Error('手机号位数要为11位'));
			        }
					else{
						callback();
					}
			       }
			     }, 1000);
			   };
			      var validatePass = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('请输入密码'));
			        } else {

			          callback();
			        }
			     };

			// var emails = (rule, value, callback) => {
			// 	if (value === '') {
			// 		callback(new Error('请输入邮箱'));
			// 	} else {
			//
			// 		callback();
			// 	}
			// };
			  
		 
			 return {
					 isSticky: false,
					 form: {
						 userId: '',
						 avatar: '',
						 username: '',
						 password: '',
						 introduction: '',
						 phone: '',
						 email: '',
						 money: 0,
					 },
					 rules: {
						 username:[
							 { validator: username, trigger: 'blur' }
						 ],
						password: [
							{ validator: validatePass, trigger: 'blur' }
						],
						 // email: [
							//  { validator: emails, trigger: 'blur' }
						 // ],

						 phone: [
							{ validator:  phone, trigger: 'blur' }
						]
					 },
					 isLogged: false,//是否登录
				 	ismenu1: true,
					ismenu2: false,
					ismenu3: false,
					 selectedAmount: 0,
					 customAmount: '',
					 selectedPaymentMethod: 'wechat',
				 selectneirou: '',//搜索框内容
				 user:{
					 userId: '',
					 username: '',
					 avatar: '',
				 },



			 };
			},
	    mounted() {
			window.addEventListener('scroll', this.handleScroll);
			this.iflogin();
		},
		methods: {
			handleScroll( event) {
				const scrollHeight = event.target.screenTop;
				const threshold = 50;
	
				this.isSticky = scrollHeight > threshold;
			},
			handleAvatarSuccess(res ) {
				console.log('上传成功，服务器返回的数据：', res);
				this.form.avatar = res;

			},
			beforeAvatarUpload(file) {

				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return   isLt2M;
			},
			handleOpen(key, keyPath) {
			   console.log(key, keyPath);
			 },
			 handleClose(key, keyPath) {
				console.log(key, keyPath);
			 },

		   submitForm() {
				axios.post('/user/updateUser', this.form).then(res=>{
					if(res.data ==1){
						alert("修改成功");
						this.iflogin();
					}
					else{
						alert("修改失败");
					}

				});

			},
			resetForm() {
				this.iflogin();

			},
			iflogin(){
				axios.get('/user/iflogin').then(res=>{

					if(res.data != "") {
						this.form.userId = res.data;
						axios.get('/user/getUser?userId=' + this.form.userId).then(res => {
							this.form = res.data;
							this.user = res.data;

						});
						this.isLogged = true;

					}

				});

			},
			logout(){
				axios.post('/user/logout').then(res=>{
					this.isLogged = false;
					this.iflogin();
					window.location.href = "index.html";


				});

			},
			geren(){
				window.location.href = "user.html"
			},
			menu1(){
				this.ismenu1 = true;
				this.ismenu2 = false;
				this.ismenu3 = false;
			},
			menu2(){
				this.ismenu1 = false;
				this.ismenu2 = true;
				this.ismenu3 = false;
			},
			menu3(){
				this.ismenu1 = false;
				this.ismenu2 = false;
				this.ismenu3 = true;
			},
			selectAmount(amount) {
				this.selectedAmount = amount;
				this.customAmount = '';
			},
			clearSelection() {
				this.selectedAmount = 0;
			},
			selectPayment(paymentMethod) {
				this.selectedPaymentMethod = paymentMethod;
			},
			recharge( ){

				// 不是默认金额，是其他金额
				if (this.customAmount != '') {
					this.selectedAmount = parseFloat(this.customAmount);
				}

				let paymentWindow = window.open("http://127.0.0.1:80/alipay/alipay/pay?subject="+this.form.username+"&traceNo="+Math.floor(Math.random() * 900000)+ 100000+"&totalAmount="+this.selectedAmount , 'payment', 'width=1000,height=800,left=200,top=200'); // 打开支付页面的弹窗
				paymentWindow.focus(); // 将焦点设置到支付页面的弹窗

				// 监听支付窗口的关闭事件
				const checkWindowClosed = setInterval(() => {
					if (paymentWindow.closed) {
						clearInterval(checkWindowClosed); // 停止定时器
						this.iflogin(); // 支付窗口关闭时调用 iflogin() 方法
					}
				}, 1000); // 每隔1秒检查支付窗口是否关闭

			},
			// 搜索
			select(){
				axios.get('/other/select/select?selectneirou='+this.selectneirou).then(res=>{
					if(res.data == "ok"){
						window.location.href = "select.html"
					}

				});

			},
			geren(){
				window.location.href = "user.html"
			},

				 
				 
		}
		 	 
	})
	 
	</script>
</html>
